<!-- techSetting -->
<template>
  <div class="techSetting content_box">
    <div class="header_row flex align-center flex-wrap" v-if="hasBtn('techSetting:query')">
      <div class="flex align-center m-r-2">
        <span>方案名称：</span>
        <el-input v-model="searchObj.CostName" placeholder="请输入内容" clearable></el-input>
      </div>

      <div class="flex align-center m-r-2">
        <span>考核类型：</span>
        <el-select v-model="searchObj.Examine" placeholder="请选择" clearable>
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="flex align-center m-r-2">
        <span>是否有效：</span>
        <el-select v-model="searchObj.IsActive" placeholder="请选择" clearable>
          <el-option v-for="item in boolenOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <el-button type="primary" @click="handleFilter">查询</el-button>
    </div>

    <div class="m-b-1 flex align-center space-between">
      <el-button type="success" @click="(showForm = true), (currentItem = {})" v-if="hasBtn('techSetting:add')">添加方案</el-button>
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize" @pagination="getList" />
    </div>
    <el-table class="m-b-1" v-loading="listLoading" :data="list" @sort-change="sortChange" border stripe style="width: 100%" row-key="Id" @expand-change="expand">
      <el-table-column fixed type="expand">
        <template slot-scope="{ row }">

          <div class="table-expand">
            <div class="table-expand-boxs" :class=" idx%2 == 0 ? '' : 'box-bg' " v-for="(cell, idx) of row.Settings" :key="idx">
              <div class="table-expand-box">{{ cell.Sname }}</div>
              <div class="flex-table-expand">
                <div class="table-expand-box">{{ '达标百分比：' + cell.Condition + '%' }}</div>
                <div class="table-expand-box">{{ '返还百分比：' + cell.Refund + '%' }}</div>
              </div>
            </div>
          </div>

          <!-- <div
            v-if="row.Settings"
            class="flex m-t-1 align-center space-between ladder_item"
          >
            <div class="flex-1">
              <div
                class="flex align-center space-between ladder_cell"
                v-for="(cell, idx) of row.Settings"
                :key="idx"
              >
                <div class="flex align-center m-r-1">
                  <span class="tit_span nowarp">{{ cell.Sname }}</span>
                </div>
                <div class="info_group">
                  <div class="flex align-center">
                    <span class="tit_span nowarp">达标百分比：</span>
                    <span class="nowarp">{{ cell.Condition }}%</span>
                  </div>
                  <div class="flex align-center">
                    <span class="tit_span nowarp">返还百分比：</span>
                    <span class="nowarp">{{ cell.Refund }}%</span>
                  </div>

                  --------旧代码注释部分------
                  <div class="flex align-center">
                    <span class="tit_span nowarp">开始时间：</span>
                    <span class="nowarp">{{ cell.StartTime }}</span>
                  </div>
                  <div class="flex align-center">
                    <span class="tit_span nowarp">结束时间：</span>
                    <span class="nowarp">{{ cell.EndTime }}</span>
                  </div>
                  --------------

                </div>
              </div>
            </div>
          </div>
          <span v-else>暂无阶梯方案</span> -->
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" align="center" fixed>
      </el-table-column>
      <el-table-column prop="Sname" label="方案名称" align="center" sortable>
      </el-table-column>
      <!-- 团队直营 或 个人直营 -->
      <el-table-column prop="Examine" label="考核类型" align="center" sortable>
        <template slot-scope="{ row }">
          <span>{{ findExamines(row.Examine) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="StartTime" label="开始时间" align="center">
      </el-table-column>
      <el-table-column prop="EndTime" label="结束时间" align="center">
      </el-table-column> -->
      <el-table-column prop="Standard" label="考核金额" align="center" sortable>
      </el-table-column>
      <!-- <el-table-column label="考核条件" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.Condition }}%</div>
        </template>
      </el-table-column>
      <el-table-column prop="Refund" label="返还百分比" align="center" sortable>
        <template slot-scope="scope">
          <div>{{ scope.row.Refund }}%</div>
        </template>
      </el-table-column> -->
      <el-table-column prop="Remark" label="备注" align="center" sortable>
      </el-table-column>

      <el-table-column prop="IsActive" label="是否有效" align="center" sortable>
        <template slot-scope="scope">
          <el-switch v-model="scope.row.IsActive" :disabled="!hasBtn('techSetting:active')" @change="switchChange(scope.row.Id, scope.row.IsActive)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" fixed="right" v-if="hasBtn('techSetting:edit') || hasBtn('techSetting:delete')">
        <template slot-scope="{ row }">
          <el-button v-loading="btnLoad" size="mini" @click="handleEdit(row)" v-if="hasBtn('techSetting:edit')" type="primary">编辑</el-button>
          <el-button size="mini" v-if="hasBtn('techSetting:delete')" type="danger" @click="$delConfirm(() => del(row.Id))">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <TechSettingForm :show.sync="showForm" :form-data="currentItem" @finish="getList"></TechSettingForm>
  </div>
</template>

<script>
  import { getTechCostSetting, delTechCostSetting, toggleValidTechCostSetting, GetSettingById } from '@/api/system/tech-cost-setting'
  import Pagination from '@/components/Pagination'
  import TechSettingForm from './components/TechSettingForm'
  import { deepClone } from '@/utils'
  import { mapState } from 'vuex'
  export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'techSetting',
    components: { Pagination, TechSettingForm },
    data() {
      //这里存放数据
      return {
        showForm: false,
        currentItem: {},
        btnLoad: false,
        dialogVisible: false,
        dialogType: "add",
        pageTotal: 0,
        tableData: [],
        typeOptions: [
          { label: '个人直营销售总额', value: 1 },
          { label: '直属团队直营销售总额', value: 2 },
          { label: '团队销售总额', value: 3 },
        ],
        boolenOptions: [
          { label: "是", value: true },
          { label: "否", value: false }
        ],
        addObj: {},
        list: [],
        total: 0,
        listLoading: true,
        searchObjTmpl: {},
        searchObj: {
          Sname: '',
          Examine: '',
          IsActive: '',
          CostName: '',
          StartTime: '',
          EndTime: ''
        },
        listQuery: {
          PageIndex: 1,
          PageSize: 10,
          // UserId: '00000000-0000-0000-0000-000000000000', //缴费用户Id
          // ExtendId: '00000000-0000-0000-0000-000000000000', //推荐用户Id
          IsPaging: true, //是否分页
          SortName: 'CreateDate',
          SortType: false
        },
      };
    },
    //监听属性 类似于data概念
    computed: {
      dialogTitle() {
        return this.dialogType == 'add' ? '新增技术服务年费信息方案' : '编辑技术服务年费信息方案'
      },
    },
    //监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.searchObjTmpl = deepClone(this.searchObj)
      this.getList()
    },
    activated() { },
    //方法集合
    methods: {
      handleEdit(row) {
        this.btnLoad = true
        GetSettingById({ Id: row.Id }).then(res => {
          this.currentItem = res.Data
          this.showForm = true
          this.btnLoad = false
        }).catch(_ => {
          this.btnLoad = false
        })

      },
      findExamines(exa) {
        let list = []
        if (exa && exa.length > 0) {
          let nexa = exa.split(',')
          for (let item of nexa) {
            let obj = this.typeOptions.find(_ => item == _.value)
            list.push(obj.label)
          }
        } else {
          list = ['暂无']
        }
        return list.join(',')
      },
      addSetting(type) {
        this.dialogType = type
        this.dialogVisible = true
      },
      resetFilter() {
        this.searchObj = deepClone(this.searchObjTmpl)
        this.handleFilter()
      },
      sortChange(data) {
        const { prop, order } = data
        this.listQuery.SortName = prop
        if (order === 'ascending') {
          this.listQuery.SortType = true
        } else {
          this.listQuery.SortType = false
        }
        this.handleFilter()
      },
      handleFilter() {
        this.listQuery.PageIndex = 1
        this.getList()
      },
      getQuery() {
        const params = {
          ...this.searchObj,
          ...this.listQuery,
        }
        for (let i in params) {
          if (params[i] === '') {
            delete params[i]
          }
        }
        return params
      },
      async getList() {
        this.listLoading = true
        const params = this.getQuery()
        // params.UserId = this.userId
        // params.ExtendId = this.userId
        const { Data, Total } = await getTechCostSetting(params)
        const data = Data.map((item, index) => {
          for (let cell in item) {
            if (!item[cell] && this.$getType(item[cell]) !== 'Number') {
              item[cell] = '-'
            }
          }
          return item
        })
        this.listLoading = false
        this.list = data || []
        this.total = Total || 0
      },
      async del(id) {
        const { code } = await delTechCostSetting({
          Id: id
        })
        if (code == 200) {
          this.$notify({
            title: '删除成功',
            message: 'success',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }
      },
      switchChange(id, IsActive) {
        toggleValidTechCostSetting({ Id: id }).then(_ => {
          this.$notify({
            title: '切换成功',
            message: 'success',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })
      },
      expand(row, expand) {
        // console.log(row)
        if (!row.OpenExpand) {
          row.OpenExpand = true
          GetSettingById({ Id: row.Id }).then(res => {
            this.$set(row, 'Settings', res.Data.Settings)
          }).catch(_ => {

          })
        }
      },
    },
  }
</script>
//@import url(); 引入公共css类
<style  scoped>
  /* .techSetting >>> .el-input-group__append {
    padding: 0 !important;
  } */

  .tit_span {
    width: auto !important;
  }
  .sortInput {
    width: 22%;
  }
  .info_group {
    width: 65%;
  }
  /* .promoteB >>> .el-dialog {
    min-width: 560px;
  } */

  .ladder_item {
    width: 95%;
    border-bottom: 1px solid #cecece;
    padding: 5px 0;
  }
  .ladder_cell + .ladder_cell {
    border-top: 2px dashed #f6bcbc;
  }
  .ladder_cell {
    padding: 5px 0;
  }
  .ladder_name {
    /* width: 100px !important; */
    margin-right: 3%;
  }

  .el-icon-circle-close {
    font-size: 18px;
    transition: color 0.25s linear;
  }
  .el-icon-circle-close:hover {
    color: #cecece;
    cursor: pointer;
  }
  .table_ladname {
    width: 30%;
    font-size: 16px;
  }
  .table-expand-box {
    width: 30%;
  }
  .flex-table-expand {
    display: flex;
    width: 70%;
  }
  .flex-table-expand .table-expand-box {
    width: 50%;
  }
</style>
